Overview
The mobile application uses react-i18next internationalization library to display text. By default, the text in the app is displayed in Irish. The user is able to switch between displaying text in Irish or English.
All text data used in the application is stored locally in the [resources.json](/Translations Editor/#resourcesjson) file. This data can be generated on the backoffice translation editor. The translation editor stores translations data on the [supabase database](../1. Onboarding/supabase.md/#supabase). All the translations can be downloaded by pressing the Download JSON File button and imported into the project as a [resources.json](/Translations Editor/#resourcesjson) file located in /src/locales/ folder.
The react-i18-next library reads that file in src/state/i18next.config.js file and uses the useTranslation hook to distribute translated texts throughout the application.
Naming Translations
Every translation has a namespace and a key.
Namespace
The namespace describes the component in which the text will be used. Every namespace should convert the name of the component that uses PascalCase to snake_case .
For example: The component AudioSlideStage uses the namespace audio_slide_stage.
Key
The key describes a string variable which stores the a text value. Every key should describe the purpose/value of the english text. Every key is written in lowerCamelCase.
For example: The namespace audio_drag_activity_stage contains two keys as of the time writing this documentation: goodJob and heading. The goodJob key describes the value of the english text which says "Good Job!". The heading key describes the the purpose of the key which is to provide a heading value inside the StoryStageHeader component.
Important Links
| Description | Link |
|---|---|
| Backoffice Translation Editor | https://backoffice.abair.ie/translations |
| i18-next documentation | https://www.i18next.com/ |
| react-i18-next documentation | https://react.i18next.com/ |